<template>
    <div>
      <el-container height="700px" > 
          <!-- //头部 -->
          <el-header height="70px">  
            <div style="text-align: center; font-size: 22px; margin-top: 50px;">工作台</div>
          </el-header>
  
          <!-- //身体 -->
        <el-main>
              <!-- 本日业绩,本月业绩 -->
              <el-container>
                <el-col >
                
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="我的任务" name="today" >
                  
                    <span>{{ '待配送：'+this.todistribution }}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>{{ '配送中：'+this.distributioning }}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>{{ '已配送：'+this.distributioned }}</span>
                        <br>
                        <br>
                  
                  <!--当状态为开始配送时 -->
                    <el-row>
                        <el-col  v-for=" m in myOrders" :key="m.id" >
                            <el-card class="box-card"   v-if="m.status==1?true:false" body-style="padding:5px">
                                    <div style="padding: 14px;">
                                        <div style="font-size:13px">订单编号：{{ m.id }} 
                                            <span style="font-size:16px; margin-left:35px"><b>{{m.status==1?'待配送':m.status==2?'配送中':'交易成功'}}</b></span>
                                            
                                        </div> 
                                        <br>
                                        <div>收货地址:{{ m.address }}</div>
                                        <br>
                                        <div>客户昵称:{{m.nickName }}</div>
                                        <br>
                                        <div>客户电话:{{m.phone}}</div>
                                        <br>
                                        <div style="font-size:15px"><b>{{ "距离目的地:  3.2km" }}</b></div>
                                        <br>
                                        
                                        <div class="bottom clearfix"  >
                                            <el-row >
                                                <el-col :offset="10">
                                                    <div style="margin-top:8px">    
                                                        <el-button type="info" @click="startDispatching(m)" v-if="m.status==1?true:false" round class="button" size="medium" >开始配送</el-button>
                                                    </div>  
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>

                  <!-- 当状态为配送中时 -->
                    <el-row>
                        <el-col v-for=" m in myOrders" :key="m.id" >
                            <el-card class="box-card"  v-if="m.status==2?true:false"   body-style="padding:5px">
                                    <div style="padding: 14px;">
                                        <div style="font-size:13px">订单编号：{{ m.id }} 
                                            <span style="font-size:16px; margin-left:35px"><b>{{m.status==1?'待配送':m.status==2?'配送中':'交易成功'}}</b></span>
                                            
                                        </div> 
                                        <br>
                                        <div>收货地址:{{ m.address }}</div>
                                        <br>
                                        <div>客户昵称:{{m.nickName }}</div>
                                        <br>
                                        <div>客户电话:{{m.phone}}</div>
                                        <br>
                                        <div style="font-size:15px"><b>{{ "距离目的地:  3.2km" }}</b></div>
                                        <br>
                                        
                                        <div class="bottom clearfix"  >
                                            <el-row >
                                                <el-col :offset="10">
                                                    <div style="margin-top:8px">    
                                                        <el-button type="info"  v-if="m.status==2?true:false" round class="button" size="medium" >配送中</el-button>
                                                    </div>  
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                            </el-card>
                        </el-col>
                    </el-row>



                   <!-- 当状态为已配送时 -->
                   <el-row>
                        <el-col v-for=" m in myOrders" :key="m.id" >
                            <el-card class="box-card"  v-if="m.status==3?true:false"   body-style="padding:5px">
                                    <div style="padding: 14px;">
                                        <div style="font-size:13px">订单编号：{{ m.id }} 
                                            <span style="font-size:16px; margin-left:35px"><b>{{m.status==1?'待配送':m.status==2?'配送中':'交易成功'}}</b></span>
                                            
                                        </div> 
                                        <br>
                                        <div>收货地址:{{ m.address }}</div>
                                        <br>
                                        <div>客户昵称:{{m.nickName }}</div>
                                        <br>
                                        <div>客户电话:{{m.phone}}</div>
                                        <br>
                                        <div style="font-size:15px"><b>{{ "距离目的地:  3.2km" }}</b></div>
                                        <br>
                                        
                                        <div class="bottom clearfix"  >
                                            <el-row >
                                                <el-col :offset="10">
                                                    <div style="margin-top:8px">    
                                                        <el-button type="info"  v-if="m.status==3?true:false" round class="button" size="medium" >已配送</el-button>
                                                    </div>  
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                            </el-card>
                        </el-col>
                    </el-row>  
                    
                    
                    </el-tab-pane>
                  <el-tab-pane label="接单中心" name="month" >
                  
                    <span>{{ '待接单数量：'+this.toReceiveOrderCount }}</span>
                    <br>
                    <br>
                    
  <div style="margin: 15px 0;"></div>
                    <el-row>
                        <el-col  v-for=" o in Orders" :key="o.id"  >
                            <el-card class="box-card1"  body-style="padding:5px">
                                    <div style="padding: 14px;">
                                        <div style="font-size:15px"><b>{{ "距离目的地:  3.2km" }}</b></div>
                                        <br>
                                        <div style="font-size:13px">订单编号：{{ o.id }} 
                                        </div> 
                                        <br>
                                        <div>收货地址:{{ o.address }}</div>
                                        <br>
                                        <div>客户昵称:{{o.nickName }}</div>
                                        <br>
                                        <div>客户电话:{{o.phone}}</div>
                                    </div>

                                    <div class="bottom clearfix"  >
                                            <el-row >
                                                <el-col :offset="10">
                                                    <div style="margin-top:5px">    
                                                        <el-button type="info" @click="getOrders(o.id)" round class="button" size="medium" >立即接单</el-button>
                                                    </div>  
                                                </el-col>
                                            </el-row>
                                        </div>
                            </el-card>
                        </el-col>
                    </el-row>
                  </el-tab-pane>
                   </el-tabs>
                </el-col>
              </el-container>
    
              
          </el-main>
  
          <!-- //尾部 -->
          
      <el-footer>
            <!-- <div style="margin:-10px">
            
                <el-menu router mode="horizontal">
                <el-menu-item index="1" @click="$router.push('index')">首  页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('type')"> 分  类</el-menu-item>    
                <el-menu-item index="3" @click="$router.push('carts')"> 购 物 车</el-menu-item>
                <el-menu-item index="4" @click="$router.push('my')"> 我  的</el-menu-item>
                </el-menu> 
            
            
            </div> -->


            </el-footer>
      </el-container>
    </div>
  </template>
  
  <script>
    
  export default {
      data(){
          return{
              activeName: 'today',
              todistribution:0, //待配送
              distributioning:0, //配送中
              distributioned:0,//交易成功
              toReceiveOrderCount:0,//待接单数量
              myOrders:[],
              Orders:[],
              distributionList:[],
              
          }
      },
      methods:{
        //开始配送
        startDispatching(m){
          let dispatcherId = sessionStorage.getItem("dispatcherId");
          let param ={};
          param.id = m.id;
          m.status =2;
          param.status = m.status;
          param.dispatcherId =dispatcherId;
          console.log(dispatcherId);
          this.$axios.post('api/app/distribution/startDispatching',param)
          .then(res =>{
            if(res.data.code == 200){
              let tab={};
              tab.index = 0;
              this.handleClick(tab);
              this.orderId = m.id;
              let userId = sessionStorage.getItem("dispatcherId");
              let state = 2;
              this.$axios.get('/api/app/distribution/updateDistributing?orderId='+this.orderId+"&userId="+userId+"&state="+state)
             .then(res =>{
              console.log("dddw",res.data);
              if(res.data.code == 200){
                return "ok";
            }
          })

            }
          })
        },


        //立即接单
        getOrders(id){
          let dispatcherId = sessionStorage.getItem("dispatcherId");
          let param ={};
          param.id =id;
          console.log(id);
          param.dispatcherId =dispatcherId;
          console.log(dispatcherId);
          this.$axios.post('api/app/distribution/updateDistributionId',param)
          .then(res =>{
            if(res.data.code == 200){
              let tab={};
              tab.index = 1;
              this.handleClick(tab);
              this.orderId = id;
              this.dispatcherId = sessionStorage.getItem("dispatcherId");
              console.log(dispatcherId);
              this.$axios.get('/api/app/distribution/findDistribution?orderId='+this.orderId+"&dispatcherId="+this.dispatcherId)
             .then(res =>{
              if(res.data.code == 200){
                this.distributionList = res.data.data;
                this.distributionList.userId = this.dispatcherId;
                console.log(this.distributionList);
                this.$axios.post('/api/app/distribution/insertDistribution',this.distributionList)
                .then(res=>{
                  if(res.data.code == 200){
                    return "ok";
                  }
                })  
            }
          })

            }
          })

        },
        handleClick(tab, event) {
        console.log(tab, event);
        if(tab.index==0){
           let dispatcherId = sessionStorage.getItem("dispatcherId");
           console.log(dispatcherId);
          this.$axios.get('/api/app/distribution/queryOwnDistributionOrders?dispatcherId='+dispatcherId)
        .then(res=>{
          console.log(res.data);
        if(res.data.code == 200){
           this.myOrders = res.data.data;
           let myOrdersArray = [];
           myOrdersArray = res.data.data;
           console.log(myOrdersArray);
           let toCount =  0; //待配送
           let counting = 0; //配送中
           let edCount = 0; //交易成功
           myOrdersArray.forEach(function(item){
            console.log(item);
            if(item.status == 1){
              toCount ++;
            }else if(item.status == 2){
              counting ++;
            }else if(item.status == 3){
               edCount++;
            }
           })
           this.todistribution = toCount;
           console.log(toCount);
           this.distributioning = counting;
           this.distributioned = edCount;

        }
        })


            
        }else if(tab.index==1){
          this.$axios.get('/api/app/distribution/queryAllDistributionOrders')
        .then(res=>{
          console.log(res.data.data);
        if(res.data.code == 200){
           this.Orders = res.data.data;
           this.toReceiveOrderCount = res.data.data.length;

        }
        })


        }
      },
      
          
        
      },
      created(){
        let tab={};
        tab.index=0;
        this.handleClick(tab);
          
      }
  }
  </script>
  
  <style>
  .el-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    background-color:rgba(246, 246, 246, 1)
  }
    .el-row{
      background-color: white;
      border-radius: 10px;
      
    }
    .text {
    font-size: 14px;
  }

  .item {
    padding: 0px ;
    margin-top: 50px;
    margin-left: 100px;

  }

  .box-card {
  
    width: 500px;
    height: 280px;
  }

  .box-card1 {
  
  width: 500px;
  height: 280px;
}




    .textBtn{
      padding-left: 10px;
    }
    .el-icon-map-location{
      font-size: 20px;
      height: 20px;
      margin: 6px;
    }
    .sel{
      position:absolute;
      clip:rect(2px 90px 30px 2px);
      width:100px;
      height:10px;
      line-height:20px;
      font-size:20px;
      font-weight:bold;
    }
    .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0px 0px 0px;
}
.el-select .el-input__inner {
    cursor: pointer;
    padding-right: 35px;
    background-color: #efefef;
}
.el-avatar>img {
    margin: 0px 0px 0px -5px;
}
  </style>